<template>
    <div>
        <el-breadcrumb separator="/" class="tprode">
            <el-breadcrumb-item :to="{ path: '/index/pShow' }">商品列表</el-breadcrumb-item>
            <el-breadcrumb-item>图书详情</el-breadcrumb-item>
        </el-breadcrumb>
        <br><el-divider></el-divider>
        <div style="width: 100px; background-color: aqua;height: 200%;">
            
        </div>
        <div class="pDetail">
            <div class="left">
                <img :src="product.imgPath" alt="" width="300px">
            </div>
            <div class="right">
                <h2>图书名称:《{{ product.productName }}》</h2>
                <p><strong>图书简介:</strong></p><span class="textArea">{{ product.description }}</span>
                <p><strong>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:</strong><span class="bookPrice">&nbsp;&nbsp;￥{{
                    product.price }}元</span></p>
                <p><strong>出版时间:</strong>&nbsp;&nbsp;{{ product.date }}</p>
                <p><strong>作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;者:</strong>&nbsp;&nbsp;{{ product.author }}</p>
                <p><strong>出&nbsp;&nbsp;版&nbsp;社:</strong>&nbsp;&nbsp;{{ product.press }}</p>
                <el-button type="danger" icon="el-icon-shopping-cart-2" @click="addCarts">加入购物车</el-button>
            </div>
        </div>

    </div>
</template>

<script src="../assets/js/ProductDetailView.js"></script>
<style src="../assets/css/ProductDetailView.css" scoped></style>
